<template>
  <div class="home_card">
    <ul class="rowCusContent">
      <li @click="toRoute('0', checkPermission(['account@index']))">
        <div class="leftImg">
          <img src="~@/assets/images/img19.png" alt="" />
          <div>
            <!-- <h4>累计注册会员数</h4>
            <span>较上周</span> -->
            <h4>{{ $t("Home.index1") }}</h4>
            <span>{{ $t("Home.index2") }}</span>
          </div>
        </div>
        <div class="rightImg">
          <h2 class="DINfont">{{ countData.accounts }}</h2>
          <span :class="getClass(countData.history_diff_last_week_accounts)">
            <img
              :src="getImg(countData.history_diff_last_week_accounts)"
              alt=""
            />
            <span>{{
              Math.abs(countData.history_diff_last_week_accounts)
            }}</span>
          </span>
        </div>
      </li>
      <li @click="toRoute('1', checkPermission(['account@index']))">
        <div class="leftImg">
          <img src="~@/assets/images/img20.png" alt="" />
          <div>
            <!-- <h4>本月注册会员数</h4>
            <span>较上月</span> -->
            <h4>{{ $t("Home.index3") }}</h4>
            <span>{{ $t("Home.index4") }}</span>
          </div>
        </div>
        <div class="rightImg">
          <h2 class="DINfont">{{ countData.this_month_accounts }}</h2>
          <span
            :class="getClass(countData.this_month_diff_last_month_accounts)"
          >
            <img
              :src="getImg(countData.this_month_diff_last_month_accounts)"
              alt=""
            />
            <span>{{
              Math.abs(countData.this_month_diff_last_month_accounts)
            }}</span>
          </span>
        </div>
      </li>
      <li @click="toRoute('2', checkPermission(['account@index']))">
        <div class="leftImg">
          <img src="~@/assets/images/img21.png" alt="" />
          <div>
            <!-- <h4>本周注册会员数</h4>
            <span>较上周</span> -->
            <h4>{{ $t("Home.index5") }}</h4>
            <span>{{ $t("Home.index2") }}</span>
          </div>
        </div>
        <div class="rightImg">
          <h2 class="DINfont">{{ countData.this_week_accounts }}</h2>
          <span :class="getClass(countData.this_week_diff_last_week_account)">
            <img
              :src="getImg(countData.this_week_diff_last_week_account)"
              alt=""
            />
            <span>{{
              Math.abs(countData.this_week_diff_last_week_account)
            }}</span>
          </span>
        </div>
      </li>
      <li @click="toRoute('3', checkPermission(['account@index']))">
        <div class="leftImg">
          <img src="~@/assets/images/img22.png" alt="" />
          <div>
            <!-- <h4>今日注册会员数</h4>
            <span>较昨日</span> -->
            <h4>{{ $t("Home.index6") }}</h4>
            <span>{{ $t("Home.index7") }}</span>
          </div>
        </div>
        <div class="rightImg">
          <h2 class="DINfont">{{ countData.today_accounts }}</h2>
          <span
            :class="
              getClass(countData.today_day_diff_yester_day_accounts)
            "
          >
            <img
              :src="
                getImg(countData.today_day_diff_yester_day_accounts)
              "
              alt=""
            />
            <span>{{
              Math.abs(countData.today_day_diff_yester_day_accounts)
            }}</span>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getHomeCounts } from "@/api/home";

export default {
  props: {
    toTime: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      countData: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getHomeCounts()
        .then((res) => {
          if (res.code == 10000) {
            this.countData = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    getClass(val) {
      if (val >= 0) {
        return "redText";
      } else {
        return "greenText";
      }
    },
    getImg(val) {
      if (val >= 0) {
        return require("@/assets/images/img16.png");
      } else {
        return require("@/assets/images/img17.png");
      }
    },
    toRoute(val, disabled) {
      if (!disabled) {
        return false;
      }
      if (val == 1) {
        //本月
        this.$router.push({
          // name: "会员管理",
          path: "/vip",
          query: {
            created_at: [
              parseInt(this.toTime.yester_day_month_start_time * 1000),
              parseInt(this.toTime.yester_day_before_time * 1000),
            ],
          },
        });
      } else if (val == 2) {
        //本周
        this.$router.push({
          // name: "会员管理",
          path: "/vip",
          query: {
            created_at: [
              parseInt(this.toTime.yester_day_week_start_time * 1000),
              parseInt(this.toTime.yester_day_before_time * 1000),
            ],
          },
        });
      } else if (val == 3) {
        //今日
        this.$router.push({
          // name: "会员管理",
          path: "/vip",
          query: {
            created_at: [
              parseInt(this.toTime.today_start_time * 1000),
              parseInt(this.toTime.today_start_time * 1000),
            ],
          },
        });
      } else {
        this.$router.push({
          // name: "会员管理",
          path: "/vip",
        });
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.rowCusContent {
  > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 28px;
    .leftImg {
      img {
        max-width: 30px;
        margin-right: 12px;
      }
      h4 {
        line-height: 25px;
      }
      span {
        color: #999999;
        line-height: 20px;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .rightImg {
      text-align: right;
      h2 {
        line-height: 25px;
        margin-bottom: 3px;
      }
      > span {
        padding-right: 3px;
      }
      img {
        max-width: 15px;
        vertical-align: middle;
      }
    }
  }
}
</style>
